
import React, { useState, useEffect } from 'react';
import { Card, Space,Statistic,Cascader, InputNumber,Input,Drawer, Select,Button,Modal,message , Form, Row, Col, Switch, Slider, Radio, Checkbox, Rate, Upload, ColorPicker,Menu ,Table, Tag, Divider, DatePicker, TimePicker} from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import { Link, useRouter } from 'next/router';
import axios from 'axios';
import Introduction from './introduction';
import Info from './strategyInfo';

const Strategy = () => {
    const { Option } = Select;
    const formItemLayout = {
      labelCol: {
        span: 6,
      },
      wrapperCol: {
        span: 14,
      },
    };

   
    const onFinish = (values) => {
        console.log('Received values of form: ', values);
        const token = localStorage.getItem('token');
        axios.post('/api/trade/get_strategy', values, {
            headers: {
              Authorization: `Bearer ${token}`
            }
          })
      .then((response) => {
        console.log('Success:', response.data);
        message.success('成功设置交易策略');
        
      })
      .catch((error) => {
        console.log('Error:', error);
        // 登录失败时的处理
        if (error.response) {
          // 服务器返回了错误响应
          const errorMessage = error.response.data.msg||'设置交易策略失败';
          message.error(errorMessage);
        } else if (error.request) {
          // 请求已发出，但没有收到响应
          message.error('请求失败，请检查网络连接');
        } else {
          // 发送请求时出了问题
          message.error('请求失败，请检查后端服务是否可用');
        }
      });
  };

      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };

      const [open, setOpen] = useState(false);
      const showDrawer = () => {
        setOpen(true);
      };
      const onClose = () => {
        setOpen(false);
      };

return (
  <Space direction="horizontal" size={16}>
    <Card
      title="量化交易"
      style={{
        width: 600,
        height: 650,
      }}
    >
      <Form
    name="validate_other"
    {...formItemLayout}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    style={{
      maxWidth: 600,
    }}
  >
   
   <Form.Item
        {...formItemLayout}
        name="stock_code"
        label="股票代码"
        rules={[
          {
            required: true,
            message: 'Please input your stock code!',
          },
        ]}
      >
        <Input placeholder="your stock code" />
      </Form.Item>

   <Form.Item name="auto_trade" label="是否开启自动交易">
      <Radio.Group>
      <Radio value="True">是</Radio>
      <Radio value="False">否</Radio>
      </Radio.Group>
    </Form.Item>

    <Form.Item
      label="自动交易限额"
      name="limit_amount"
      rules={[
        {
          required: true,
          message: '须为100的整数倍',
        },
      ]}
    >
      <Input />
    </Form.Item>
    
   <Form.Item name="momentum_strategy" label="是否采用动量策略">
      <Radio.Group>
      <Radio value="True">是</Radio>
      <Radio value="False">否</Radio>
      </Radio.Group>
    </Form.Item>

    
   <Form.Item name="moving_average_strategy" label="是否采用均线策略">
      <Radio.Group>
      <Radio value="True">是</Radio>
      <Radio value="False">否</Radio>
      </Radio.Group>
    </Form.Item>

    
   <Form.Item name="bollinger_bands_strategy" label="是否采用布林带策略">
      <Radio.Group>
      <Radio value="True">是</Radio>
      <Radio value="False">否</Radio>
      </Radio.Group>
    </Form.Item>

    
   <Form.Item name="stop_loss_strategy" label="是否采用75%止损策略">
      <Radio.Group>
      <Radio value="True">是</Radio>
      <Radio value="False">否</Radio>
      </Radio.Group>
    </Form.Item>

    
   <Form.Item name="atr_stop_loss_strategy" label="是否采用ATR止损策略">
      <Radio.Group>
        <Radio value="True">是</Radio>
        <Radio value="False">否</Radio>
      </Radio.Group>
    </Form.Item>

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
      <Button type="link" onClick={showDrawer}>了解交易策略</Button>
      <Drawer title="交易策略介绍" onClose={onClose} open={open} width={650}>
       <Introduction />
      </Drawer>
    </Form.Item>
   
  </Form>
      
    </Card>

    <Space direction="vertical" size={16}>
    <Card
      
      title="历史交易策略"
      style={{
        width: 570,
        height: 650,
      }}
    >
        <Info />
      
    </Card>

    </Space>
  </Space>
)
};
export default Strategy;